'use client';

import React from 'react';

interface TimeSlotsProps {
  date: string;
  bookedSlots: string[];
  onTimeSlotSelect: (timeSlot: string) => void;
}

const TimeSlots: React.FC<TimeSlotsProps> = ({ date, bookedSlots, onTimeSlotSelect }) => {
  // 生成一天的时间段，从9:00到18:00，每30分钟一个时间段
  const generateTimeSlots = (): string[] => {
    const slots: string[] = [];
    const startHour = 9;
    const endHour = 18;

    for (let hour = startHour; hour < endHour; hour++) {
      slots.push(`${hour.toString().padStart(2, '0')}:00-${(hour).toString().padStart(2, '0')}:30`);
      slots.push(`${hour.toString().padStart(2, '0')}:30-${(hour + 1).toString().padStart(2, '0')}:00`);
    }

    return slots;
  };

  const timeSlots = generateTimeSlots();

  // 检查时间段是否已被预约
  const isSlotBooked = (slot: string): boolean => {
    return bookedSlots.includes(slot);
  };

  // 格式化日期显示
  const formatDateDisplay = (): string => {
    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
    return new Date(date).toLocaleDateString('zh-CN', options);
  };

  return (
    <div className="time-slots-container">
      <div className="mb-6 text-xl font-semibold text-teal-700">{formatDateDisplay()}</div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        {timeSlots.map((slot, index) => {
          const booked = isSlotBooked(slot);
          return (
            <button
              key={index}
              className={`
                py-4 px-5 rounded-xl text-left transition-all duration-300 transform hover:scale-[1.03]
                font-medium text-base shadow-sm border-2
                ${booked 
                  ? 'bg-red-100 border-red-300 text-red-700 cursor-not-allowed hover:scale-100'
                  : 'bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100'
                }
              `}
              onClick={() => !booked && onTimeSlotSelect(slot)}
              disabled={booked}
            >
              <div>{slot}</div>
              {booked && <div className="mt-1 text-xs font-normal text-red-600">已预约</div>}
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default TimeSlots;